<template>
	<view>
		<view class="searchBar">
			<uni-nav-bar left-icon="left" :height="'64rpx'" :border="false" color="#EF5233"
				backgroundColor="rgba(0,0,0,0)" rightWidth="0" @clickLeft="back">
				<slot>
					<view class="input-view">
						<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />
						<input confirm-type="search" class="nav-bar-input" type="text" v-model="keyname" placeholder="输入搜索关键词"
							placeholder-class="placestyle" @confirm="confirm">
						<view class="search-btn" @click="handleSerach">搜索</view>
					</view>
				</slot>
			</uni-nav-bar>
		</view>

	</view>
</template>

<script>
	export default {
		name: "searchBar",
		data() {
			return {
				keyname:this.keynames
			}
		},
		props:{
			keynames:{
				type:String,
				default:""
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			handleSerach() {
				this.$emit('searchValue',this.keyname)
				uni.navigateTo({
					url:'/otherpages/search/searchList?key='+this.keyname
				})
			},
			confirm(data){
				// console.log(data)
				this.$emit('searchValue',data.detail.value)
			}
		}
	}
</script>

<style lang="scss">
	.searchBar {
		/* padding: 0 0 22rpx 0; */
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
	}
	.input-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		background-color: #fff;
		height: 30px;
		border-radius: 15px;
		flex-wrap: nowrap;
		line-height: 30px;
		border: 1rpx solid #EF5233;
		padding: 0 10rpx 0 27rpx;
		height: 64rpx;
		margin-left: 0;
		box-sizing: border-box;
	}

	.nav-bar-input {
		height: 60rpx;
		line-height: 60rpx;
		width: 370rpx;
		font-size: 14px;
		background-color: #fff;
	}

	.placestyle {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #AEAEB0;
	}

	.search-btn {
		width: 103rpx;
		height: 50rpx;
		background: #EF5233;
		border-radius: 32rpx;
		backdrop-filter: blur(10px);
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
		/* margin-top: 7rpx; */
	}
</style>